<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
    <div style="width: 185px;float: left">
      <!-- <router-link to="/treeTable/modu2">Home</router-link> |
      <router-link to="/treeTable/modu2/about">About</router-link> -->
      <el-tree
        ref="tree2"
        :data="data2"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        default-expand-all
        @node-click="handleNodeClick"
      />
    </div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>左树右表</span>
      </div>
      <router-view name="appMain" />
      <!-- card body -->
      <div id="microApp" />
    </el-card>

  </div>
</template>

<script>
import { loadMicroApp } from 'qiankun'
import store from '@/store'
// import router from '@/router'
export default {

  data() {
    return {
      filterText: '',
      data2: [{
        id: 1,
        label: 'Level one 1',
        children: [{
          id: 4,
          label: 'Level two 1-1',
          children: [{
            id: 9,
            label: '/home'
          }, {
            id: 10,
            label: '/about'
          }]
        }]
      }, {
        id: 2,
        label: 'Level one 2',
        children: [{
          id: 5,
          label: 'Level two 2-1'
        }, {
          id: 6,
          label: 'Level two 2-2'
        }]
      }, {
        id: 3,
        label: 'Level one 3',
        children: [{
          id: 7,
          label: 'Level two 3-1'
        }, {
          id: 8,
          label: 'Level two 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  mounted() {
    /** 手动加载一个微应用 */

    loadMicroApp(
      {
        name: 'modu2',
        entry: process.env.NODE_ENV === 'production' ? '/modu2/' : '//localhost:8081/modu2/',
        container: '#microApp',
        props: { data: { store, router: this.$route }},
        loader(loading) {
          console.log('treeTable loader bloolean', loading)
        }
      }
    )
    // loadMicroApp.update({ data: { router: this.$route }})
  },
  destroyed() {
    console.log('destroyed')
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      console.log(data)
      this.$actions.setGlobalState({ data: { store, nodePath: data.label }})
      // loadMicroApp(
      //   {
      //     name: 'modu2',
      //     entry: process.env.NODE_ENV === 'production' ? '/modu2/' : '//localhost:8081/modu2/',
      //     container: '#microApp',
      //     props: { data: { store, router: this.$route, nodePath: '/about' }}
      //   }
      // )
    }
  }
}
</script>

